<template>
	<view class="container">
		<view style="margin-top: 20px">
			<uni-row>
				<uni-col span="12">
					<uni-card class="card" :thumbnail="avatar" @click="gotoAqiRecord()">
						<image src="../../static/data/aqi.png"></image>
						<div class="title">
							<text class="uni-body uni-mt-5">{{ $t('data.AirQualityCalendar') }}</text>
						</div>
						<div class="content">
							<text>{{ $t('data.AirQualityCalendar_1') }}</text>
						</div>
					</uni-card>
				</uni-col>
				<uni-col span="12">
					<uni-card class="card" :thumbnail="avatar" @click="gotoAqiRank()">
						<image src="../../static/data/rank.png"></image>
						<div class="title">
							<text class="uni-body uni-mt-5">{{ $t('data.RankingsWeek') }}</text>
						</div>
						<div class="content">
							<text>{{ $t('data.RankingsWeek_1') }}</text>
						</div>
					</uni-card>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col span="12">
					<uni-card class="card" :thumbnail="avatar" @click="gotoAqiAnalysis()">
						<image src="../../static/data/total.png"></image>
						<div class="title">
							<text class="uni-body uni-mt-5">{{ $t('data.SiteAnalysis') }}</text>
						</div>
						<div class="content">
							<text>{{ $t('data.SiteAnalysis_1') }}</text>
						</div>
					</uni-card>
				</uni-col>
				<uni-col span="12">
					<uni-card class="card" :thumbnail="avatar" @click="gotoAqiOverview()">
						<image src="../../static/data/compare.png"></image>
						<div class="title">
							<text class="uni-body uni-mt-5">{{ $t('data.AnnualOverview') }}</text>
						</div>
						<div class="content">
							<text>{{ $t('data.AnnualOverview_1') }}</text>
						</div>
					</uni-card>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
export default {
	data() {},
	methods: {
		gotoAqiRecord() {
			uni.navigateTo({
				url: '/pages/data/aqiRecord'
			});
		},
		gotoAqiRank() {
			uni.navigateTo({
				url: '/pages/data/aqiRank'
			});
		},
		gotoAqiAnalysis() {
			uni.navigateTo({
				url: '/pages/data/aqiAnalysis'
			});
		},
		gotoAqiOverview() {
			uni.navigateTo({
				url: '/pages/data/aqiOverview'
			});
		}
	}
};
</script>

<style lang="scss">
.card {
	background-image: url('../../static/data/background.png');
	background-size: cover;
	text-align: center;
	margin: 0px auto;
	min-height: 400rpx;
	width: 280rpx;
	image {
		margin-top: 5px;
		margin-bottom: 5px;
		width: 150rpx;
		height: 150rpx;
	}
	.title {
		width: 100%;
		margin: 0px auto;
		padding-top: 4px;
		padding-bottom: 4px;
		border: 3px solid white;
		border-radius: 30px;
		margin-bottom: 5px;
		text {
			font-weight: bold;
		}
	}
	text {
		color: white;
	}
}

.container {
	display: flex;
	height: 70vh;
	width: 100%;
	position: fixed;
}
</style>
